<div class="breadCrumb clearfix">    
    <ul id="breadcrumbs">
        <li><a href="index-2.html">Home</a></li>
        <li><a href="#">Sample pages</a></li>
        <li>Contacts</li>            
    </ul>        
</div>

<div class="content">
    
    <div class="row-fluid">
        <div class="span6">
            <div class="widget">

                <div class="head dark">
                    <div class="icon"><i class="icos-list"></i></div>
                    <h2>Contacts list</h2>         
                </div>

                <div class="block-fluid">

                    <div class="slidernav">
                        <div class="slider-content">
                            <ul>
                                <li id="a"><a name="a" class="title">A</a>
                                <ul>                                        
                                    <li><a href="#">Adam</a></li>
                                    <li><a href="#">Alex</a></li>
                                    <li><a href="#">Ali</a></li>
                                    <li><a href="#">Apple</a></li>
                                    <li><a href="#">Arthur</a></li>
                                    <li><a href="#">Ashley</a></li>
                                </ul>
                            </li>
                            <li id="b"><a name="b" class="title">B</a>
                                <ul>
                                    <li><a href="#">Barry</a></li>
                                    <li><a href="#">Becky</a></li>
                                    <li><a href="#">Biff</a></li>
                                    <li><a href="#">Billy</a></li>
                                    <li><a href="#">Bozarking</a></li>
                                    <li><a href="#">Bryan</a></li>
                                </ul>
                            </li>
                            <li id="c"><a name="c" class="title">c</a>
                                <ul>
                                    <li><a href="#">Calista</a></li>
                                    <li><a href="#">Cathy</a></li>
                                    <li><a href="#">Chris</a></li>
                                    <li><a href="#">Cinderella</a></li>
                                    <li><a href="#">Corky</a></li>
                                    <li><a href="#">Cypher</a></li>
                                </ul>
                            </li>
                            <li id="d"><a name="d" class="title">d</a>
                                <ul>
                                    <li><a href="#" class="active">Dmitry</a></li>
                                    <li><a href="#">damien</a></li>
                                    <li><a href="#">danny</a></li>
                                    <li><a href="#">denver</a></li>
                                    <li><a href="#">devon</a></li>
                                    <li><a href="#">doug</a></li>
                                    <li><a href="#">dustin</a></li>
                                </ul>
                            </li>
                            <li id="e"><a name="e" class="title">E</a>
                                <ul>
                                    <li><a href="#">Barry</a></li>
                                    <li><a href="#">Becky</a></li>
                                    <li><a href="#">Biff</a></li>
                                    <li><a href="#">Billy</a></li>
                                    <li><a href="#">Bozarking</a></li>
                                    <li><a href="#">Bryan</a></li>
                                </ul>
                            </li>
                            <li id="f"><a name="f" class="title">f</a>
                                <ul>
                                    <li><a href="#">Calista</a></li>
                                    <li><a href="#">Cathy</a></li>
                                    <li><a href="#">Chris</a></li>
                                    <li><a href="#">Cinderella</a></li>
                                    <li><a href="#">Corky</a></li>
                                    <li><a href="#">Cypher</a></li>
                                </ul>
                            </li>
                            <li id="g"><a name="g" class="title">g</a>
                                <ul>
                                    <li><a href="#">damien</a></li>
                                    <li><a href="#">danny</a></li>
                                    <li><a href="#">denver</a></li>
                                    <li><a href="#">devon</a></li>
                                    <li><a href="#">doug</a></li>
                                    <li><a href="#">dustin</a></li>
                                </ul>
                            </li>
                            <li id="h"><a name="h" class="title">h</a>
                                <ul>
                                    <li><a href="#">Barry</a></li>
                                    <li><a href="#">Becky</a></li>
                                    <li><a href="#">Biff</a></li>
                                    <li><a href="#">Billy</a></li>
                                    <li><a href="#">Bozarking</a></li>
                                    <li><a href="#">Bryan</a></li>
                                </ul>
                            </li>
                            <li id="i"><a name="i" class="title">i</a>
                                <ul>
                                    <li><a href="#">Calista</a></li>
                                    <li><a href="#">Cathy</a></li>
                                    <li><a href="#">Chris</a></li>
                                    <li><a href="#">Cinderella</a></li>
                                    <li><a href="#">Corky</a></li>
                                    <li><a href="#">Cypher</a></li>
                                </ul>
                            </li>
                            <li id="j"><a name="j" class="title">j</a>
                                <ul>
                                    <li><a href="#">damien</a></li>
                                    <li><a href="#">danny</a></li>
                                    <li><a href="#">denver</a></li>
                                    <li><a href="#">devon</a></li>
                                    <li><a href="#">doug</a></li>
                                    <li><a href="#">dustin</a></li>
                                </ul>
                            </li>
                            <li id="k"><a name="k" class="title">k</a>
                                <ul>
                                    <li><a href="#">Barry</a></li>
                                    <li><a href="#">Becky</a></li>
                                    <li><a href="#">Biff</a></li>
                                    <li><a href="#">Billy</a></li>
                                    <li><a href="#">Bozarking</a></li>
                                    <li><a href="#">Bryan</a></li>
                                </ul>
                            </li>
                            <li id="l"><a name="l" class="title">l</a>
                                <ul>
                                    <li><a href="#">Calista</a></li>
                                    <li><a href="#">Cathy</a></li>
                                    <li><a href="#">Chris</a></li>
                                    <li><a href="#">Cinderella</a></li>
                                    <li><a href="#">Corky</a></li>
                                    <li><a href="#">Cypher</a></li>
                                </ul>
                            </li>
                            <li id="m"><a name="m" class="title">m</a>
                                <ul>
                                    <li><a href="#">damien</a></li>
                                    <li><a href="#">danny</a></li>
                                    <li><a href="#">denver</a></li>
                                    <li><a href="#">devon</a></li>
                                    <li><a href="#">doug</a></li>
                                    <li><a href="#">dustin</a></li>
                                </ul>
                            </li>
                            <li id="n"><a name="n" class="title">n</a>
                                <ul>
                                    <li><a href="#">damien</a></li>
                                    <li><a href="#">danny</a></li>
                                    <li><a href="#">denver</a></li>
                                    <li><a href="#">devon</a></li>
                                    <li><a href="#">doug</a></li>
                                    <li><a href="#">dustin</a></li>
                                </ul>
                            </li>
                            <li id="o"><a name="o" class="title">o</a>
                                <ul>
                                    <li><a href="#">damien</a></li>
                                    <li><a href="#">danny</a></li>
                                    <li><a href="#">denver</a></li>
                                    <li><a href="#">devon</a></li>
                                    <li><a href="#">doug</a></li>
                                    <li><a href="#">dustin</a></li>
                                </ul>
                            </li>
                            <li id="p"><a name="p" class="title">p</a>
                                <ul>
                                    <li><a href="#">Barry</a></li>
                                    <li><a href="#">Becky</a></li>
                                    <li><a href="#">Biff</a></li>
                                    <li><a href="#">Billy</a></li>
                                    <li><a href="#">Bozarking</a></li>
                                    <li><a href="#">Bryan</a></li>
                                </ul>
                            </li>
                            <li id="q"><a name="q" class="title">q</a>
                                <ul>
                                    <li><a href="#">Calista</a></li>
                                    <li><a href="#">Cathy</a></li>
                                    <li><a href="#">Chris</a></li>
                                    <li><a href="#">Cinderella</a></li>
                                    <li><a href="#">Corky</a></li>
                                    <li><a href="#">Cypher</a></li>
                                </ul>
                            </li>
                            <li id="r"><a name="r" class="title">r</a>
                                <ul>
                                    <li><a href="#">damien</a></li>
                                    <li><a href="#">danny</a></li>
                                    <li><a href="#">denver</a></li>
                                    <li><a href="#">devon</a></li>
                                    <li><a href="#">doug</a></li>
                                    <li><a href="#">dustin</a></li>
                                </ul>
                            </li>
                            <li id="s"><a name="s" class="title">s</a>
                                <ul>
                                    <li><a href="#">Barry</a></li>
                                    <li><a href="#">Becky</a></li>
                                    <li><a href="#">Biff</a></li>
                                    <li><a href="#">Billy</a></li>
                                    <li><a href="#">Bozarking</a></li>
                                    <li><a href="#">Bryan</a></li>
                                </ul>
                            </li>
                            <li id="t"><a name="t" class="title">t</a>
                                <ul>
                                    <li><a href="#">Calista</a></li>
                                    <li><a href="#">Cathy</a></li>
                                    <li><a href="#">Chris</a></li>
                                    <li><a href="#">Cinderella</a></li>
                                    <li><a href="#">Corky</a></li>
                                    <li><a href="#">Cypher</a></li>
                                </ul>
                            </li>
                            <li id="u"><a name="u" class="title">u</a>
                                <ul>
                                    <li><a href="#">damien</a></li>
                                    <li><a href="#">danny</a></li>
                                    <li><a href="#">denver</a></li>
                                    <li><a href="#">devon</a></li>
                                    <li><a href="#">doug</a></li>
                                    <li><a href="#">dustin</a></li>
                                </ul>
                            </li>
                            <li id="v"><a name="v" class="title">v</a>
                                <ul>
                                    <li><a href="#">Barry</a></li>
                                    <li><a href="#">Becky</a></li>
                                    <li><a href="#">Biff</a></li>
                                    <li><a href="#">Billy</a></li>
                                    <li><a href="#">Bozarking</a></li>
                                    <li><a href="#">Bryan</a></li>
                                </ul>
                            </li>
                            <li id="w"><a name="w" class="title">w</a>
                                <ul>
                                    <li><a href="#">Calista</a></li>
                                    <li><a href="#">Cathy</a></li>
                                    <li><a href="#">Chris</a></li>
                                    <li><a href="#">Cinderella</a></li>
                                    <li><a href="#">Corky</a></li>
                                    <li><a href="#">Cypher</a></li>
                                </ul>
                            </li>
                            <li id="x"><a name="x" class="title">x</a>
                                <ul>
                                    <li><a href="#">damien</a></li>
                                    <li><a href="#">danny</a></li>
                                    <li><a href="#">denver</a></li>
                                    <li><a href="#">devon</a></li>
                                    <li><a href="#">doug</a></li>
                                    <li><a href="#">dustin</a></li>
                                </ul>
                            </li>
                            <li id="y"><a name="y" class="title">y</a>
                                <ul>
                                    <li><a href="#">damien</a></li>
                                    <li><a href="#">danny</a></li>
                                    <li><a href="#">denver</a></li>
                                    <li><a href="#">devon</a></li>
                                    <li><a href="#">doug</a></li>
                                    <li><a href="#">dustin</a></li>
                                </ul>
                            </li>
                            <li id="z"><a name="z" class="title">z</a>
                                <ul>
                                    <li><a href="#">damien</a></li>
                                    <li><a href="#">danny</a></li>
                                    <li><a href="#">denver</a></li>
                                    <li><a href="#">devon</a></li>
                                    <li><a href="#">doug</a></li>
                                    <li><a href="#">dustin</a></li>
                                </ul>
                            </li>
                            </ul>
                        </div>
                    </div>                

                </div>
            </div>
        </div>
        
        <div class="span6">
            <div class="widget">
                <div class="profile clearfix">
                    <div class="image">
                        <img src="/images/examples/users/dmitry_b.jpg" class="img-polaroid"/>
                    </div>                        
                    <div class="info">
                        <h2>Dmitry Ivaniuk</h2>
                        <p><strong>Profile:</strong> Aqvatarius</p>
                        <p><strong>Address:</strong> 44 Revutskogo, Kiev, Ukraine</p>
                        <p><strong>Profession:</strong> Web Developer</p>
                        <div class="status">Administrator</div>
                    </div>
                    <div class="stats">
                        <div class="item">
                            <div class="title">129</div>
                            <div class="descr">Files</div>                                
                        </div>                            
                        <div class="item">
                            <div class="title">38</div>
                            <div class="descr">Stories</div>                                
                        </div>                                                        
                        <div class="item">
                            <div class="title">45</div>
                            <div class="descr">Followers</div>
                        </div>
                        <div class="item">
                            <div class="title">14</div>
                            <div class="descr">Following</div>                                
                        </div>                            
                    </div>
                </div>
            </div>
            
            <div class="widget">
                <div class="head dark">
                    <div class="icon"><span class="icos-earth"></span></div>
                    <h2>Friends</h2>
                </div>
                <div class="block-fluid users">
                    <div class="item">
                        <img src="/images/examples/users/dmitry_m.jpg" class="img-polaroid"/>
                        <a href="#">Dmitry Ivaniuk</a>
                        <div class="caption"><span class="label label-success">online</span></div>
                    </div>
                    <div class="item">
                        <img src="/images/examples/users/alexey_m.jpg" class="img-polaroid"/>
                        <a href="#">Alexey Fruz</a>
                        <div class="caption"><span class="label label-success">online</span></div>
                    </div>          
                    <div class="item">
                        <img src="/images/examples/users/olga_m.jpg" class="img-polaroid"/>
                        <a href="#">Olga Yukhimchuk</a>
                        <div class="caption"><span class="label label-warning">away</span></div>
                    </div>                                             
                    <div class="item">
                        <img src="/images/examples/users/valentin_m.jpg" class="img-polaroid"/>
                        <a href="#">Valentin</a>
                        <div class="caption"><span class="label label-important">offline</span></div>
                    </div>                                                 
                </div>
            </div>
            
        </div>
        
    </div>
    
</div>  